<template>
	<view class="wrapper">
		<view class="list">
			<view class="list-item" v-for="(item, index) in list" :key="item.id">
				<view class="list-item-left">
					<image v-if="index === 0" class="list-item-left-index" src="/package-purse/static/images/one.png" mode=""></image>
					<image v-if="index === 1" class="list-item-left-index" src="/package-purse/static/images/two.png" mode=""></image>
					<image v-if="index === 2" class="list-item-left-index" src="/package-purse/static/images/three.png" mode=""></image>
					<text class="list-item-left-index" v-if="index > 2">{{ index + 1 }}</text>
					<u-avatar :src="item.avatarUrl" size="80rpx"></u-avatar>
					<view class="list-item-left-info">
						<view class="list-item-left-info-name">
							{{ item.nickName }}
						</view>
						<text>投{{ item.order_total }}台</text>
					</view>
				</view>
				<view class="list-item-right">
					<text>{{ item.commission }}</text>
					佣金
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-loadmore
			:status="loadStatus"
			:line="true"
			:loading-text="loadingText"
			:loadmore-text="loadmoreText"
			:nomore-text="nomoreText"
			:error-text="errorText"
			@click-error="retryLoad"
			v-if="list.length > 0 && page > 1"
		/>
	</view>
</template>

<script>
import { promotion } from '@/api';
import createPageScrollLoadMixin from '@/mixins/pageScrollLoadMixin';
export default {
	mixins: [
		createPageScrollLoadMixin(
			promotion.friendsList, // 请求函数
			{
				list_rows: 20,
				resFormat: 1,
				// 为每行数据添加额外属性
				processRow: (row, index) => {
					return {
						time: row.createtime,
						...row
					};
				}
			} // 配置项
		)
	],
	onLoad() {
		this.refresh();
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 20rpx 30rpx;
}
.list {
	padding: 20rpx 20rpx 40rpx;
	background: #ffffff;
	border-radius: 20rpx;
	&-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		&-left {
			display: flex;
			align-items: center;
			&-index {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
				margin-bottom: 12rpx;
				font-family: 'PingFang SC';
				font-weight: 800;
				font-size: 38rpx;
				color: #333333;
				text-align: center;
			}
			&-info {
				margin-left: 20rpx;
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				&-name {
					font-family: 'PingFang SC';
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
		&-right {
			font-family: ' PingFang SC';
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			display: flex;
			align-items: center;
			text {
				margin-right: 8rpx;
				font-family: ' PingFang SC';
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
}
</style>
